<template>
  <div>
    <!--面包屑-->
    <div style="height: 30px;width: 98%;background-color: white;padding-top: 13px;padding-left: 2%;">
      <i class="el-icon-s-home lf" style="font-size: 18px;margin-right: 10px;"></i>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >首页</el-breadcrumb-item>
        <el-breadcrumb-item >物品配置管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/goods' }">属性组总览</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--选择区域-->
    <div style="padding: 20px;">
      <i class="el-icon-search lf" style="font-size: 22px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 12px;"></i>
      <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #E4E4E4;width: 98%;height: 40px;padding-top: 8px;padding-left: 1.85%;">
        <span style="font-size: 20px;font-weight: 500;color: black;">条件查询</span>
          <span style="margin-left:45%;">属性组名称：</span>
          <el-input
            style="width: 280px;margin-top: -8px;"
            placeholder="请输入属性组名称"
            v-model="find.groupName"
            clearable>
          </el-input>
        <el-button @click="findGroupPage()" size="medium" style="border-radius: 0%;background-color: #666666;margin-left: 5%;" type="info">查询</el-button>
        <el-button @click="clearFind" size="medium" style="border-radius: 0%;background-color: #666666;margin-left: 2%;" type="info">清空</el-button>
      </div>
    </div>
    <!--数据区域-->
    <div style="padding: 20px;padding-top: 0px;">
      <i class="el-icon-s-grid lf" style="font-size: 22px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 12px;"></i>
      <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #E4E4E4;width: 98%;height: 40px;padding-top: 8px;padding-left: 1.85%;">
        <span style="font-size: 20px;font-weight: 500;color: black;">数据列表</span>
        <el-button size="small" @click="updateAttrGroupByIds(0)" class="rf" style="border-radius: 0%;background-color: #666666;margin-right: 7%;"
        type="info">禁用</el-button>
        <el-button size="small" @click="updateAttrGroupByIds(1)" class="rf" style="border-radius: 0%;background-color: #666666;margin-right: 1.5%;"
        type="info">启用</el-button>
        <el-button size="small" @click="showUpdateGroup" class="rf" style="border-radius: 0%;background-color: #666666;margin-right: 1%;"
        type="info">修改</el-button>
        <el-button size="small" @click="isShow = true" class="rf" style="border-radius: 0%;background-color: #666666;margin-right: 1%;"
        type="info">新增</el-button>
      </div>
      <div>
        <el-table
          :data="allGroup.records"
          :row-style="{height:'46px'}"
          @selection-change="select"
          border
          :header-cell-style="tableHeader"
          :cell-style="{borderColor:'#CCCCCC',margin:'0',padding:'0'}"
          style="width: 100%;font-size: 18px;border: #CCCCCC solid 1px;">
          <el-table-column
            align="center"
            type="selection"
            width="80">
          </el-table-column>
          <el-table-column
            align="center"
            prop="groupOrder"
            label="编号"
            width="180px">
          </el-table-column>
          <el-table-column
            align="center"
            prop="groupName"
            label="属性组名称"
            width="400px">
          </el-table-column>
          <el-table-column
            align="center"
            prop="catString"
            label="适用分类">
          </el-table-column>
          <el-table-column
            align="center"
            label="属性数量"
            width="120px">
            <template slot-scope="scope">
              {{scope.row.infoList.length}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="状态"
            width="160px">
            <template slot-scope="scope">
              {{scope.row.groupState==0?"禁用":"启用"}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
            width="160px">
            <template slot-scope="scope">
              <el-button type="info"
                style="border-radius: 0%;background-color: #666666;font-size: 16px;"
               size="mini" @click="updateState(scope.row)">{{scope.row.groupState==0?"启用":"禁用"}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
        <!--分页-->
      <div style="background-color: #D7D7D7;height: 98px;width: 100%;">
        <el-pagination
        class="rf"
        style="margin-right: 2%;margin-top: 40px;"
          @current-change="handleCurrentChange"
          :current-page.sync="allGroup.current"
          :page-size="13"
          layout="prev, pager, next, jumper"
          :total="allGroup.total">
        </el-pagination>
      </div>
    </div>


    <!--新增属性组-->
    <el-dialog :visible.sync="isShow" >
      <!--小标题-->
      <div style="min-height: 90%;width: 100%;">
        <i @click="add={},isShow=false" class="el-icon-s-grid lf" style="font-size: 26px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 20px;"></i>
        <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #CCCCCC;height: 40px;;width: 98%;padding-top: 8px;padding-left: 1.85%;">
          <span style="font-size: 20px;font-weight: 500;color: black;">新增属性组</span>
          <i class="el-icon-close rf" style="font-size: 26px;font-weight: bold;font-weight:bold;margin-right: 20px;"></i>
        </div>
      </div>
      <!--属性组信息-->
      <div style="padding-top: 60px;width: 99.8%;min-height: 600px;font-size: 20px;height: 100%;border: #d7d7d7 1px solid;background-color: #F2F2F2;">
        <div>
          <span style="margin-left:10%;">属性组名称 </span>
          <el-input
            style="margin-left: 15px;width: 350px;margin-bottom: 40px;"
            placeholder="请输入名称"
            v-model="add.groupName"
            clearable>
          </el-input>
        </div>
        <div style="text-align: center">
        <p style="">属性绑定</p>
          <el-transfer
            style="text-align: left; display: inline-block"
            v-model="add.attributeId"
            filterable
            :titles="['待选分类', '已选分类']"
            :button-texts="['<', '>']"
            :format="{
              noChecked: '${total}',
              hasChecked: '${checked}/${total}'
            }"
            @change="handleChange"
            :data="infos"
            :props="{
                  key: 'attributeId',
                  label: 'attributeName'
                }">
          </el-transfer>
        </div>
      </div>
      <div style="background-color: #D7D7D7;height: 105px;width: 100%;">
        <el-button
        @click="addAttrGroup"
        style="color: white;margin-top: 30px;margin-left: 45%;width: 100px;border-radius: 0%;background-color: #666666;"
        size="medium" plain>保存</el-button>
      </div>
    </el-dialog>

    <!--修改属性组-->
    <el-dialog :visible.sync="isShow2" >
      <!--小标题-->
      <div style="min-height: 90%;width: 100%;">
        <i @click="update={},isShow2=false" class="el-icon-s-grid lf" style="font-size: 26px;font-weight: bold;margin-top: 10px;margin-left: 8px;margin-right: 20px;"></i>
        <div style="border: #d7d7d7 1px solid;border-bottom: none;background-color: #CCCCCC;height: 40px;;width: 98%;padding-top: 8px;padding-left: 1.85%;">
          <span style="font-size: 20px;font-weight: 500;color: black;">新增属性组</span>
          <i class="el-icon-close rf" style="font-size: 26px;font-weight: bold;font-weight:bold;margin-right: 20px;"></i>
        </div>
      </div>
      <!--属性组信息-->
      <div style="padding-top: 60px;width: 99.8%;min-height: 600px;font-size: 20px;height: 100%;border: #d7d7d7 1px solid;background-color: #F2F2F2;">
        <div>
          <span style="margin-left:10%;">属性组名称 </span>
          <el-input
            style="margin-left: 15px;width: 350px;margin-bottom: 40px;"
            placeholder="请输入名称"
            v-model="update.groupName"
            clearable>
          </el-input>
        </div>
        <div style="margin-bottom: 40px;">
          <span style="margin-left:10%;margin-right: 2%;">属性组状态 </span>
          <el-radio
            v-for="n in state"
            v-model="update.groupState"
            :key="n" :label="n">{{n==0?"禁用":"启用"}}</el-radio>
        </div>
        <div style="text-align: center">
        <p style="">属性绑定</p>
          <el-transfer
            style="text-align: left; display: inline-block"
            v-model="update.attributeId"
            filterable
            :titles="['待选分类', '已选分类']"
            :button-texts="['<', '>']"
            :format="{
              noChecked: '${total}',
              hasChecked: '${checked}/${total}'
            }"
            @change="handleChange"
            :data="infos"
            :props="{
                  key: 'attributeId',
                  label: 'attributeName'
                }">
          </el-transfer>
        </div>
      </div>
      <div style="background-color: #D7D7D7;height: 105px;width: 100%;">
        <el-button
        @click="update={},isShow2=false"
        style="color: white;margin-top: 30px;margin-left: 35%;width: 100px;border-radius: 0%;background-color: #666666;"
        size="medium" plain>取消</el-button>
        <el-button
        @click="updateAttrGroup"
        style="color: white;margin-top: 30px;margin-left: 5%;width: 100px;border-radius: 0%;background-color: #666666;"
        size="medium" plain>保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default{
    name:"AttrGroupVew",
    data(){
      return{
        //条件查询鉴定记录对象
        find:{
          pageNum:1,
          pageSize:13
        },
        //新增属性组对象
        add:{},
        //修改属性组对象
        update:{},
        //属性组分页对象
        allGroup:{},
        //是否新增窗口
        isShow:false,
        //是否修改窗口
        isShow2:false,
        //所有属性
        infos:[],
        //选中属性组集合
        selection:[],
        //状态选项
        state:[
          0,1
        ],
        //现在属性组id集合
        selectIds:[]
      }
    },
    methods:{
      /**
       * 修改多个属性组状态
       * @param {Object} groupState 状态码
       */
      updateAttrGroupByIds(groupState){
        this.update={}
        this.update.groupIds = this.selectIds
        this.update.groupState = groupState
        this.$http.post("/goods/attributeGroup/updateAttrGroupByIds",this.update).then(resp=>{
          if(resp.data.code==200){
            this.$message({
              message: "修改成功",
              showClose: true,
              type: 'success'
            });
            this.update={}
            this.selectIds=[]
            this.findGroupPage()
          }else{
            this.$message({
              message: resp.data.message,
              showClose: true,
              type: 'error'
            });
          }
        })
      },
      /**
       * 修改单个属性状态
       */
      updateState(group){
        this.update={}
        this.update.groupId = group.groupId
        if(group.groupState==0){
          this.update.groupState=1
        }else{
          this.update.groupState=0
        }
        this.updateAttrGroup()
      },
      /**
       * 修改属性组
       */
      updateAttrGroup(){
        this.$http.post("/goods/attributeGroup/updateAttrGroup",this.update).then(resp=>{
          if(resp.data.code==200){
            this.$message({
              message: "修改成功",
              showClose: true,
              type: 'success'
            });
            this.isShow2 = false
            this.update={}
            this.findGroupPage()
          }else{
            this.$message({
              message: resp.data.message,
              showClose: true,
              type: 'error'
            });
          }
        })
      },
      /**
       * 展示修改属性组窗口
       */
      showUpdateGroup(){
        if(this.selection.length>1){
          this.$message({
            message: "一次只能选择一个属性组进行修改",
            showClose: true,
            type: 'error'
          });
          return;
        }else if(this.selection.length<1){
          this.$message({
            message: "请选择一个属性组进行修改",
            showClose: true,
            type: 'error'
          });
          return;
        }else{
          let j = JSON.stringify(this.selection[0]);
          this.update=JSON.parse(j)
          let ids = new Array()
          for (var i = 0; i < this.update.infoList.length; i++) {
            let info = this.update.infoList[i]
            ids.push(info.attributeId)
          }
          this.update.attributeId = ids
          console.log(this.update)
          this.isShow2 = true
        }
      },
      /**
       * @param {Object} selection 选中集合
       */
      select(selection){
        this.selectIds=[]
        this.selection = selection
        for (var i = 0; i < this.selection.length; i++) {
          let s = this.selection[i]
          this.selectIds.push(s.groupId)
        }
      },
      /**
       * 保存属性组
       */
      addAttrGroup(){
        this.$http.post("/goods/attributeGroup/addAttrGroup",this.add).then(resp=>{
          if(resp.data.code==200){
            this.$message({
              message: "新增成功",
              showClose: true,
              type: 'success'
            });
            this.isShow = false
            this.add = {}
            this.findGroupPage()
          }else{
            this.$message({
              message: resp.data.message,
              showClose: true,
              type: 'error'
            });
          }
        })
      },
      /**
       * 穿锁框变换
       * @param {Object} value      值
       * @param {Object} direction  方向
       * @param {Object} movedKeys  当前变换值
       */
      handleChange(value, direction, movedKeys) {
        this.update.attributeId = value
        this.$forceUpdate()
        console.log(value, direction, movedKeys);
        console.log(this.update)
      },
      /**
       * 查找所有二级类别
       */
      findAllCat(){
        let page = {}
        page.pageNum = 1
        page.pageSize = -1
        console.log(page)
        this.$http.post("/goods/attributeInfo/findAttrPage",page).then(resp=>{
          this.infos = resp.data.data.records
        })
      },
      /**
       * 变化页码
       * @param {Object} val 新的页码
       */
      handleCurrentChange(val) {
        this.find.pageNum = val
        this.findGroupPage()
      },
      /**
       * 分页条件查询所有属性组
       */
      findGroupPage(){
        this.$http.post("/goods/attributeGroup/findGroupPage",this.find).then(resp=>{
          this.allGroup = resp.data.data
        })
      },
      /**
       * 表格表头样式
       */
      tableHeader({ row, column, rowIndex, columnIndex }){
        if (rowIndex === 0) {
          return 'background-color: #D7D7D7;color:#333333;font-size:18px;font-weight: 500;height: 40px;margin-top: 85px;border-color:#CCCCCC;'
        }
      },
      /**
       * 清空选择对象
       */
      clearFind(){
        let num = this.find.pageNum
        let size = this.find.pageSize
        this.find = {}
        this.find.pageNum = num
        this.find.pageSize = size
        this.findGroupPage()
      },
    },
    activated(){
      this.findGroupPage()
      this.findAllCat()
    }
  }
</script>

<style>
  *{
    padding: 0;
    margin: 0;
  }
  .cl::after{
    content: '';
    display: block;
    clear: both;
  }
  .lf{
  	float: left;
  }
  .rf{
  	float: right;
  }
  .el-table th.gutter{
    display: table-cell!important;
  }
  .el-dialog__header{
    padding: 0;
  }
  .el-dialog__body{
    padding: 0;
  }
  .el-button--small{
    font-size: 14px;
    width: 70px;
    height: 30px;
  }
  .el-transfer-panel{
    width: 300px;
    margin-top: 50px;
  }
  .el-radio__label{
    font-size: 18px;
  }
</style>
